<template>
	<view class="classify_container">
		<view class="left">
			<view v-for="(item,index) in classifyList" :key="item.id" class="classifyListTitle">
				<navigator url="javascript:;" @click="jumpTo(index)">{{item.title}}</navigator>
			</view>
		</view>
		<view class="right">
			<ClassifyItem v-for="item in classifyList" :key="item.id" :classifyList="item"></ClassifyItem>
		</view>
	</view>
</template>

<script>
	import ClassifyItem from "@/components/ClassifyItem.vue"
	export default {
		data() {
			return {
				classifyList:[
					{
						id:1,
						title:"小米手机",
						showList:[
							{
								id:1,
								showPic:"/static/image/select1.jpg",
								showTitle:"小米10"
							},
							{
								id:2,
								showPic:"/static/image/select1.jpg",
								showTitle:"小米10"
							},
							{
								id:3,
								showPic:"/static/image/select1.jpg",
								showTitle:"小米10"
							}
						]
					},
					{
						id:2,
						title:"红米手机",
						showList:[
							{
								id:1,
								showPic:"/static/image/select1.jpg",
								showTitle:"小米10"
							},
							{
								id:2,
								showPic:"/static/image/select1.jpg",
								showTitle:"小米10"
							},
							{
								id:3,
								showPic:"/static/image/select1.jpg",
								showTitle:"小米10"
							}
						]
					},
					{
						id:3,
						title:"电视",
						showList:[
							{
								id:1,
								showPic:"/static/image/select1.jpg",
								showTitle:"小米10"
							},
							{
								id:2,
								showPic:"/static/image/select1.jpg",
								showTitle:"小米10"
							},
							{
								id:3,
								showPic:"/static/image/select1.jpg",
								showTitle:"小米10"
							}
						]
					},
					{
						id:4,
						title:"路由",
						showList:[
							{
								id:1,
								showPic:"/static/image/select1.jpg",
								showTitle:"小米10"
							},
							{
								id:2,
								showPic:"/static/image/select1.jpg",
								showTitle:"小米10"
							},
							{
								id:3,
								showPic:"/static/image/select1.jpg",
								showTitle:"小米10"
							}
						]
					},
					{
						id:5,
						title:"小爱音箱",
						showList:[
							{
								id:1,
								showPic:"/static/image/select1.jpg",
								showTitle:"小米10"
							},
							{
								id:2,
								showPic:"/static/image/select1.jpg",
								showTitle:"小米10"
							},
							{
								id:3,
								showPic:"/static/image/select1.jpg",
								showTitle:"小米10"
							}
						]
					}
				]
			}
		},
		methods: {
			jumpTo(index){
				console.log(index);
			}
		},
		components:{
			ClassifyItem
		}
	}
</script>

<style lang="less" scoped>
.classify_container{
  display: flex;
}
.left{
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  width: 20%;
  border-right: 1px solid #d1d1d1;
  .classifyListTitle{
  	  display: block;
  	  margin-bottom: 30rpx;
	  font-size: 30rpx;
	  navigator:first-child{
		  margin-top: 30rpx;
	  }
  }
}

.right{
	position: absolute;
	width: 80%;
	right: 0;
}
</style>
